import React, { Component } from 'react'
import store from "../store/index.js"
import {connect} from "react-redux"
import axios from 'axios'
import {bindActionCreators} from "redux" // 合并抽离出去的action的
import * as action from "../action/index.js" // 从这个页面引入所有的方法并且起名字为action
 class App extends Component {
 checknme(){
     store.dispatch({
         type:"checkname" 
     })
 }
 cheangeage(){
   console.log(this.props,444444)
   this.props.setAge()
 }
 componentDidMount(){
   this.props.setArr()
 }
  render() {
    console.log(this.props,33333)
    console.log(store.getState());
    return (

      <div>
          <span>{this.props.age}</span>
          <span>{this.props.name1}</span>
          <button onClick={this.cheangeage.bind(this)}>点击我修改age</button>
          {
            this.props.arr.length? this.props.arr.map((item,index)=>{
              return <h3 key={index}>{item}</h3>
            }):""
          }
      </div>
    )
  }
}
let mapStateToProps = (state)=>{ //将仓库中的数据注入到组件得props中
  console.log(state,222222)
   return {
       ...state.appReducer
   }
}
// let mapDispatchToprops = (dispatch)=>{ // 将修改仓库里定义得state得方法提供给组件得props
//     return {
//        setAge(){
//          dispatch ({
//            type:"setAge", // type这个字段必须叫type ，因为要和reducer里的action里的type互相匹配
//            payload:"21"  // 这个字段得得键名随便起
//          })
//        },
//        setName(){
//         dispatch ({
//           type:"setNanme", // type这个字段必须叫type ，因为要和reducer里的action里的type互相匹配
//           payload:"lisi"  // 这个字段得得键名随便起
//         })
//       },
//       setArr () {
//         axios.get("list").then((res)=>{
//            dispatch({
//              type:"setArr",
//              payload:res.data
//            })
//         })
//       }

//     }
    
// }
let mapDispatchToprops = (dispatch)=>bindActionCreators(action,dispatch)
export default connect(mapStateToProps,mapDispatchToprops)(App)